<script setup lang="ts">
import BlockBox from '../BlockBox.vue';
import { ESCarousel, ESContent } from '../../packages/index'
const list = ['1', '2', '3', '4', '5', '6']
</script>

<template>
    <BlockBox text="轮播图">
        <div style="  width: 100%;height: 500px;" class="display">
            <ESCarousel :width="500" :height="250" primary-color="#ccc">
                <ESContent v-for="item in list" :key="item">
                    <div style="width: 100%;height: 100%; background: grey;" class="display">{{ item }}</div>
                </ESContent>
            </ESCarousel>
        </div>
    </BlockBox>
</template>

<style scoped>
.display {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
